/* eslint-disable no-unused-vars */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-unused-state */
import React from 'react';

/**
 * 控件渲染错误拦截,主要考虑部分组件bug和数据源绑定出错可能导致的bug拦截。
 */
class ControlErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
    this.hasError = false;
  }

  // static getDerivedStateFromError(error) {
  //   // 更新 state 使下一次渲染能够显示降级后的 UI
  //   return { hasError: true };
  // }

  componentDidCatch(error, errorInfo) {
    this.hasError = true;
    this.setState({ error, errorInfo });
    // 错误上报
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.hasError) {
      this.hasError = false;
      // 重置错误
      // this.setState({ hasError: false });
      // 自定义降级后的 UI 并渲染
      return <span style={{ color: 'red' }}>组件渲染出错!</span>;
    }

    return this.props.children;
  }
}

export default ControlErrorBoundary;
